<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        .container{
            border-width: 1px;
            margin-top: 10%;
            margin-left: 30%;
            margin-right: 30%;
            width: 534px;height: 400px;
            border-style: solid;
            border-radius: 5px;
            border-color: deepskyblue;
            box-shadow: 3px 3px 2px #cccccc;
            background-image: url(http://pic38.nipic.com/20140306/7451759_165813621370_2.jpg);
        }
    </style>
</head>
<body style="background-color: aliceblue" onload="selectFun()">
<div class="container">
    <form method="post" style="padding-bottom: 30px;margin-left: 311px;height: 30px;">
        <span>可选城市：</span>
        <select onchange="selectFun()" id="select" name="city" style="height: 30px;border-radius: 5px;background-color: antiquewhite">
            <option value="110100">北京</option>
            <option value="310100">上海</option>
            <option value="440300">深圳</option>
            <option value="440100">广州</option>
            <option value="510100" selected>成都</option>
        </select>
    </form>
    <table border="1" style="width: 533px;">
        <tr>
            <th>城市</th>
            <th>天气</th>
            <th>气温</th>
            <th>风向</th>
            <th>风级</th>
            <th>更新时间</th>
        </tr>
        <tr style="text-align: center">
            <td id="city">1</td>
            <td id="weather">1</td>
            <td id="temp">1</td>
            <td id="wind_dir">1</td>
            <td id="wind_class">1</td>
            <td id="uptime">1</td>
        </tr>
    </table>
</div>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    function selectFun() {
        const str = $("#select").find("option:selected").val();
        console.log(str);
        $.ajax({
            type: "GET",
            url: "/getInfo/"+str,
            success: function (data) {
                $("#city").text(data.result.location.name);
                $("#weather").text(data.result.now.text);
                $("#temp").text(data.result.now.temp);
                $("#wind_dir").text(data.result.now.wind_dir);
                $("#wind_class").text(data.result.now.wind_class);

                let str = insert(4,data.result.now.uptime,"-");
                str = insert(7,str,"-");
                str = insert(10,str," ");
                str = insert(13,str,":");
                str = insert(16,str,":");
                $("#uptime").text(str);
            }
        })
    }
    function insert(index,str,temp) {
        let newstr = "";
        const fstr = str.substring(0,index);
        const estr = str.substring(index,str.length);
        newstr = fstr+temp+estr;
        return newstr;
    }
</script>
</body>
</html>